<template>
	<view class="order-container">
		<!-- 收货地址 -->
		<view class="address-section" @click="selectAddress">
			<view class="address-info">
				<view class="recipient">
					<text class="name">{{ addressInfo.name }}</text>
					<text class="phone">{{ addressInfo.phone }}</text>
				</view>
				<view class="address">
					<text class="address-label">地址: </text>
					<text class="address-text">{{ addressInfo.address }}</text>
				</view>
			</view>
			<view class="arrow">></view>
		</view>
		<!-- 分隔线 -->
		<view class="divider-line"></view>

		<!-- 商品列表 -->
		<view class="product-section" @click="showProductList">
			<view class="product-images">
				<image v-for="(item, index) in displayProducts" :key="index" class="product-image" :src="item.image"
					mode="aspectFill"></image>
			</view>
			<view class="product-summary">
				<text class="product-count">共{{ selectedItems.length }}件商品</text>
				<view class="arrow">></view>
			</view>
		</view>

		<!-- 优惠券 -->
		<view class="coupon-section" @click="selectCoupon">
			<text class="coupon-label">优惠券</text>
			<view class="coupon-info">
				<text class="coupon-count">{{ availableCoupons.length }}张可用</text>
				<view class="arrow">></view>
			</view>
		</view>

		<!-- 价格明细 -->
		<view class="price-section">
			<view class="price-item">
				<text class="price-label">商品金额</text>
				<text class="price-value">¥{{ originalPrice.toFixed(2) }}</text>
			</view>
			<view class="price-item">
				<text class="price-label">活动优惠</text>
				<text class="price-value discount">- ¥{{ activityDiscount.toFixed(2) }}</text>
			</view>
			<view class="price-item">
				<text class="price-label">优惠券</text>
				<text class="price-value discount">- ¥{{ couponDiscount.toFixed(2) }}</text>
			</view>
			<view class="price-item">
				<text class="price-label">运费</text>
				<text class="price-value">¥{{ shippingFee.toFixed(2) }}</text>
			</view>
		</view>

		<!-- 买家留言 -->
		<view class="message-section">
			<input class="message-input" v-model="buyerMessage" placeholder="买家留言, 45字以内" maxlength="45"
				@input="onMessageInput" />
			<text class="message-count">{{ messageLength }}/45</text>
		</view>

		<!-- 底部支付栏 -->
		<view class="payment-footer">
			<view class="payment-info">
				<text class="payment-label">应付:</text>
				<text class="payment-amount">¥{{ finalPrice.toFixed(2) }}</text>
			</view>
			<view class="pay-button" @click="submitOrder">
				<text class="pay-text">去付款</text>
			</view>
		</view>

		<!-- 商品清单弹窗 -->
		<view v-if="showProductListModal" class="product-list-mask" @click="closeProductList">
			<view class="product-list-popup" @click.stop>
				<view class="product-list-header">
					<text class="product-list-title">商品清单 (共{{ selectedItems.length }}件商品)</text>
					<text class="close-btn" @click="closeProductList">×</text>
				</view>
				<scroll-view class="product-list-content" scroll-y>
					<view class="product-list-item" v-for="(item, index) in selectedItems" :key="index">
						<image class="product-list-image" :src="item.sku.imageUrl" mode="aspectFill"></image>
						<view class="product-list-info">
							<text class="product-list-title-text">{{ item.spu.name }}</text>
							<text class="product-list-attributes">{{ getAttributeText(item) }}</text>
							<text class="product-list-price">¥{{ item.sku.price }}</text>
						</view>
						<view class="product-list-quantity">
							<text class="quantity-text">x{{ item.quantity }}</text>
						</view>
					</view>
				</scroll-view>
				<view class="product-list-footer">
					<view class="confirm-btn" @click="closeProductList">
						<text class="confirm-text">确定</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 优惠券选择弹窗 -->
		<view v-if="showCouponModal" class="coupon-modal-mask" @click="closeCouponModal">
			<view class="coupon-modal-popup" @click.stop>
				<view class="coupon-modal-header">
					<text class="coupon-modal-title">优惠券 ({{ availableCoupons.length }}张可用)</text>
					<text class="close-btn" @click="closeCouponModal">×</text>
				</view>
				<scroll-view class="coupon-modal-content" scroll-y>
					<view class="coupon-item" v-for="(coupon, index) in availableCoupons" :key="index"
						@click="chooseCoupon(coupon)"
						:class="{ 'selected': selectedCoupon && selectedCoupon.id === coupon.id }">
						<view class="coupon-left">
							<text class="coupon-value">{{ coupon.type }}</text>
						</view>
						<view class="coupon-right">
							<text class="coupon-name">{{ coupon.name }}</text>
							<text class="coupon-date">{{ coupon.dateRange }}</text>
							<text class="coupon-desc">{{ coupon.description }}</text>
						</view>
					</view>
					<view v-if="availableCoupons.length === 0" class="no-coupon">
						<text>暂无可用优惠券</text>
					</view>
				</scroll-view>
				<view class="coupon-modal-footer">
					<view class="confirm-btn" @click="closeCouponModal">
						<text class="confirm-text">确定</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 支付密码输入弹窗 -->
		<view v-if="showPasswordModal" class="password-modal-mask" @click="closePasswordModal">
			<view class="password-modal-popup" @click.stop>
				<view class="password-modal-header">
					<text class="password-modal-title">请输入支付密码</text>
					<text class="close-btn" @click="closePasswordModal">×</text>
				</view>
				<view class="password-modal-content">
					<text class="payment-amount">支付金额：¥{{ finalPrice.toFixed(2) }}</text>
					<view class="password-input-container">
						<input class="password-input" type="number" password maxlength="6" placeholder="密码6个1"
							:value="password" @input="onPasswordInput" focus />
					</view>
					<view class="password-dots">
						<view class="password-dot" v-for="i in 6" :key="i" :class="{ 'filled': i <= password.length }">
						</view>
					</view>
				</view>
				<view class="password-modal-footer">
					<view class="cancel-btn" @click="closePasswordModal">
						<text class="cancel-text">取消</text>
					</view>
					<view class="confirm-btn" @click="confirmPayment">
						<text class="confirm-text">确认支付</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		get,
		post,
		put
	} from "@/utils/request";

	export default {
		data() {
			return {
				selectedItems: [],
				addressInfo: {
					name: '亮亮',
					phone: '186****1688',
					address: '广东省深圳市南山区西丽镇沙河西路12号丽新花园6栋1502号'
				},
				availableCoupons: [],
				showCouponModal: false,
				selectedCoupon: null,
				buyerMessage: '',
				messageLength: 0,
				activityDiscount: 5.00,
				shippingFee: 0.00,
				showProductListModal: false,
				showPasswordModal: false,
				password: '',
				userId: null,
				id: 0,
				orderDataFromApi: {
					total: 1,
					rows: [{

					}],
					code: 200,
					msg: "查询成功"
				}
			}
		},
		computed: {
			displayProducts() {
				return this.selectedItems.slice(0, 3).map(item => ({
					image: item.sku.imageUrl,
					title: item.spu.name,
					price: item.sku.price,
					quantity: item.quantity
				}));
			},

			originalPrice() {
				return this.selectedItems.reduce((total, item) => {
					return total + (item.sku.price * item.quantity);
				}, 0);
			},

			couponDiscount() {
				if (!this.selectedCoupon) return 0;

				// 满减券逻辑：订单金额≥10元减2元
				if (this.selectedCoupon.couponType === "2") {
					return this.originalPrice >= 10 ? 2 : 0;
				}
				// 折扣券逻辑：订单金额的10%
				else if (this.selectedCoupon.couponType === "3") {
					return this.originalPrice * 0.1;
				}

				return 0;
			},

			finalPrice() {
				return this.originalPrice - this.activityDiscount - this.couponDiscount + this.shippingFee;
			}
		},
		onLoad(options) {
			this.userId = options.userId;

			const app = getApp();
			if (app.globalData && app.globalData.selectedItems) {
				this.selectedItems = app.globalData.selectedItems.map(item => ({
					...item,
					quantity: item.quantity || 1
				}));
			}

			this.fetchUserCoupons();
		},
		methods: {
			formatDate(dateStr) {
				const date = new Date(dateStr);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},

			async fetchUserCoupons() {
				if (!this.userId) return;

				try {
					const res = await get("/transaction/UserCoupon/list", {
						membersId: this.userId
					});

					if (res.code === 200 && Array.isArray(res.rows)) {
						const unusedCoupons = res.rows.filter(coupon => coupon.status === 0);

						this.availableCoupons = unusedCoupons.map(coupon => {
							let couponValue, couponType;

							if (coupon.couponType === "2") {
								couponValue = 2;
								couponType = "满10减2";
							} else if (coupon.couponType === "3") {
								couponValue = 0.1;
								couponType = "9折券";
							}
							this.id = coupon.id;
							return {
								id: coupon.id,
								name: coupon.couponName,
								value: couponValue,
								couponType: coupon.couponType,
								minAmount: coupon.couponType === "2" ? 10 : 0,
								type: couponType,
								dateRange: coupon.receivedTime ?
									this.formatDate(coupon.receivedTime) : '无日期信息',
								description: '全场通用',
								originalData: coupon
							};
						});
					}
				} catch (error) {
					console.error('获取优惠券失败:', error);
					uni.showToast({
						title: '获取优惠券失败',
						icon: 'none'
					});
				}
			},

			getAttributeText(item) {
				try {
					if (item.selectedAttributes) {
						return Object.values(item.selectedAttributes).join(' / ');
					}
					if (item.sku && item.sku.spec) {
						const spec = JSON.parse(item.sku.spec);
						return Object.values(spec).join(' / ');
					}
					return '';
				} catch (e) {
					return item.sku.spec || '';
				}
			},

			selectAddress() {
				uni.navigateTo({
					url: '/pages/kzMyShippingAddress/kzMyShippingAddress'
				});
			},

			showProductList() {
				this.showProductListModal = true;
			},

			closeProductList() {
				this.showProductListModal = false;
			},

			selectCoupon() {
				this.showCouponModal = true;
			},

			chooseCoupon(coupon) {
				if (coupon.originalData && coupon.originalData.status !== 0) {
					uni.showToast({
						title: '该优惠券已被使用',
						icon: 'none'
					});
					return;
				}

				if (coupon.couponType === "2" && this.originalPrice < 10) {
					uni.showToast({
						title: '订单金额需满10元才能使用此优惠券',
						icon: 'none'
					});
					return;
				}

				this.selectedCoupon = coupon;
				uni.showToast({
					title: `已选择${coupon.name}`,
					icon: 'success'
				});
				this.showCouponModal = false;
			},

			closeCouponModal() {
				this.showCouponModal = false;
			},

			onMessageInput(e) {
				this.messageLength = e.detail.value.length;
			},

			submitOrder() {
				if (this.finalPrice <= 0) {
					uni.showToast({
						title: '订单金额应该大于0',
						icon: 'none'
					});
					return;
				}

				this.showPasswordModal = true;
			},

			closePasswordModal() {
				this.showPasswordModal = false;
				this.password = '';
			},

			onPasswordInput(e) {
				this.password = e.detail.value;
			},

			generateOrderNo() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');
				const random = Math.floor(Math.random() * 10000).toString().padStart(4, '0');

				return `ORD${year}${month}${day}${hours}${minutes}${seconds}${random}`;
			},

			buildOrderData(status = 0) {
				const orderNo = this.generateOrderNo();
				const fullAddress = `${this.addressInfo.name} ${this.addressInfo.phone}   ${this.addressInfo.address}`;
				const apiOrderData = this.orderDataFromApi.rows[0] || {};
				const now = new Date();
				const formattedDate = this.formatDate(now);

				return {
					orderNo: orderNo,
					membersId: this.userId || 4,
					storeId: this.selectedItems[0]?.spu?.storeId || 1,
					address: fullAddress,
					couponId: this.selectedCoupon ? this.selectedCoupon.id : null,
					itemsAmount: this.originalPrice,
					discountAmount: this.activityDiscount + this.couponDiscount,
					couponAmount: this.couponDiscount,
					shippingFee: this.shippingFee,
					totalAmount: this.finalPrice,
					status: status, // 根据传入的状态参数设置
					paymentType: 2,
					paymentTime: status === 1 ? formattedDate : null, // 只有确认支付时设置支付时间
					expectDeliveryTime: "2025-08-10",
					actualDeliveryTime: "2025-08-10",
					notes: this.buyerMessage || "尽快送达",
					delFlag: "0",
					deliveryMethod: 2,
					apiOrderInfo: apiOrderData,

				};
			},

			async submitOrderToServer(orderData) {
				try {
					// 1. 提交订单
					const orderRes = await post("/transaction/shoporder", orderData);
					console.log('订单创建完整响应:', JSON.stringify(orderRes, null, 2));

					// 2. 获取订单ID
					let orderId;
					if (orderRes.data && orderRes.data.id) {
						orderId = orderRes.data.id;
					} else {
						throw new Error(`无法获取订单ID，响应结构: ${JSON.stringify(orderRes)}`);
					}

					if (!orderId) {
						throw new Error('获取到的订单ID为空');
					}

					// 3. 构建订单商品数据
					const orderItems = this.selectedItems.map(item => ({
						orderId: orderId,
						storeId: item.spu?.storeId || 1,
						skuId: item.sku?.id,
						productName: item.spu?.name || '',
						specInfo: this.getAttributeText(item),
						price: item.sku?.price || 0,
						quantity: item.quantity || 1,
						delFlag: '0'
					}));

					// 4. 提交订单商品
					const itemsRes = await post("/transaction/shoporderitem/add/batch", orderItems);
					if (itemsRes.code !== 200) {
						throw new Error(itemsRes.msg || '订单商品创建失败');
					}

					return {
						success: true,
						orderId: orderId
					};
				} catch (error) {
					console.error('订单创建异常:', error);
					uni.showToast({
						title: '订单创建失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
					return {
						success: false,
						error: error.message
					};
				}
			},

			async confirmPayment() {
				if (this.isSubmitting) return;

				if (!this.password || this.password.length !== 6) {
					uni.showToast({
						title: '请输入6位支付密码',
						icon: 'none'
					});
					return;
				}

				this.isSubmitting = true;
				uni.showLoading({
					title: '支付中...'
				});

				try {
					// 1. 构建订单数据，status设为1表示已支付
					const orderData = this.buildOrderData(1);

					// 2. 提交订单到服务器
					const {
						success,
						orderId,
						error
					} = await this.submitOrderToServer(orderData);

					if (!success) {
						throw new Error(error || '订单提交失败');
					}

					// 3. 如果使用了优惠券，更新优惠券状态
					if (this.selectedCoupon) {
						await this.updateCouponStatus(this.selectedCoupon.id);
					}

					// 支付成功跳转
					uni.hideLoading();
					uni.navigateTo({
						url: `/pages/PaySuccess/PaySuccess?orderNo=${orderData.orderNo}`
					});

				} catch (error) {
					console.error('支付流程异常:', error);
					uni.showToast({
						title: '支付失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
				} finally {
					this.isSubmitting = false;
					this.closePasswordModal();
				}
			},

			async closePasswordModal() {
				// 只有当密码输入框为空时才创建未支付订单
				if (!this.password || this.password.length === 0) {
					try {
						uni.showLoading({
							title: '创建订单中...'
						});

						// 构建订单数据，status设为0表示未支付
						const orderData = this.buildOrderData(0);

						// 提交订单到服务器
						const {
							success
						} = await this.submitOrderToServer(orderData);

						if (success) {
							uni.showToast({
								title: '已创建未支付订单',
								icon: 'none'
							});
						}
					} catch (error) {
						console.error('创建未支付订单失败:', error);
						uni.showToast({
							title: '创建订单失败',
							icon: 'none'
						});
					} finally {
						uni.hideLoading();
					}
				}

				this.showPasswordModal = false;
				this.password = '';
			},
			async updateCouponStatus(couponId) {
				if (!couponId) {
					console.error('更新优惠券状态失败: 优惠券ID为空');
					uni.showToast({
						title: '更新优惠券状态失败',
						icon: 'none'
					});
					return;
				}

				try {
					// 	const res = await post(`/transaction/UserCoupon/${couponId}`, {
					// 		status: 1,
					// 		usedTime: this.formatDate(new Date())
					// 	},
					// 	);
					const res = await put('/transaction/UserCoupon', {
						id: this.id,
						couponId: couponId,
						status: 1
					});


					if (res.code === 200) {
						console.log('优惠券状态更新成功');
					} else {
						console.error('更新优惠券状态失败:', res.msg);
						uni.showToast({
							title: '更新优惠券状态失败: ' + res.msg,
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('更新优惠券状态异常:', error);
					uni.showToast({
						title: '更新优惠券状态异常',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style scoped>
	/* 原有样式保持不变 */
	.order-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 120rpx;
	}

	.address-section {
		background-color: #fff;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 0;
	}

	.address-info {
		flex: 1;
	}

	.recipient {
		margin-bottom: 10rpx;
	}

	.name {
		font-size: 32rpx;
		color: #000;
		font-weight: bold;
		margin-right: 20rpx;
	}

	.phone {
		font-size: 28rpx;
		color: #000;
		font-weight: bold;
	}

	.address {
		display: flex;
	}

	.address-label {
		font-size: 28rpx;
		color: #999;
	}

	.address-text {
		font-size: 28rpx;
		color: #999;
		flex: 1;
		line-height: 1.4;
	}

	.divider-line {
		height: 6rpx;
		background: repeating-linear-gradient(to right,
				#ff4444 0rpx,
				#ff4444 10rpx,
				#0066cc 10rpx,
				#0066cc 20rpx);
		margin-bottom: 20rpx;
	}

	.arrow {
		font-size: 32rpx;
		color: #999;
		margin-left: 20rpx;
	}

	.product-section {
		background-color: #fff;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #f0f0f0;
		margin-bottom: 20rpx;
	}

	.product-images {
		display: flex;
		align-items: center;
	}

	.product-image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 8rpx;
		margin-right: 10rpx;
	}

	.product-summary {
		display: flex;
		align-items: center;
	}

	.product-count {
		font-size: 28rpx;
		color: #333;
		margin-right: 10rpx;
	}

	.coupon-section {
		background-color: #fff;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #f0f0f0;
		margin-bottom: 20rpx;
	}

	.coupon-label {
		font-size: 28rpx;
		color: #333;
	}

	.coupon-info {
		display: flex;
		align-items: center;
	}

	.coupon-count {
		font-size: 28rpx;
		color: #333;
		margin-right: 10rpx;
	}

	.price-section {
		background-color: #fff;
		padding: 30rpx;
		margin-top: 20rpx;
	}

	.price-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.price-item:last-child {
		margin-bottom: 0;
	}

	.price-label {
		font-size: 28rpx;
		color: #333;
	}

	.price-value {
		font-size: 28rpx;
		color: #333;
	}

	.price-value.discount {
		color: #ff4444;
	}

	.message-section {
		background-color: #fff;
		padding: 30rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.message-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.message-count {
		font-size: 24rpx;
		color: #999;
		margin-left: 20rpx;
	}

	.payment-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		border-top: 1rpx solid #eee;
		z-index: 100;
	}

	.payment-info {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.payment-label {
		font-size: 28rpx;
		color: #333;
		margin-right: 10rpx;
	}

	.payment-amount {
		font-size: 32rpx;
		color: #ff4444;
		font-weight: bold;
	}

	.pay-button {
		background-color: #ff4444;
		padding: 20rpx 40rpx;
		border-radius: 8rpx;
	}

	.pay-text {
		font-size: 28rpx;
		color: #fff;
		font-weight: bold;
	}

	.product-list-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 99999;
		display: flex;
		align-items: flex-end;
	}

	.product-list-popup {
		width: 100%;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		max-height: 80vh;
		overflow-y: auto;
		animation: slideUp 0.3s ease-out;
	}

	.product-list-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.product-list-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.product-list-content {
		max-height: 60vh;
		padding: 0 30rpx;
	}

	.product-list-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.product-list-item:last-child {
		border-bottom: none;
	}

	.product-list-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.product-list-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.product-list-title-text {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.product-list-attributes {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.product-list-price {
		font-size: 28rpx;
		color: #ff4444;
		font-weight: bold;
	}

	.product-list-quantity {
		margin-left: 20rpx;
	}

	.quantity-text {
		font-size: 28rpx;
		color: #333;
	}

	.product-list-footer {
		padding: 30rpx;
		border-top: 1rpx solid #eee;
	}

	.confirm-btn {
		background-color: #ff4444;
		padding: 25rpx;
		border-radius: 8rpx;
		text-align: center;
	}

	.confirm-text {
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
	}

	.coupon-modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 99999;
		display: flex;
		align-items: flex-end;
	}

	.coupon-modal-popup {
		width: 100%;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		max-height: 80vh;
		overflow-y: auto;
		animation: slideUp 0.3s ease-out;
	}

	.coupon-modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.coupon-modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.coupon-modal-content {
		max-height: 60vh;
		padding: 0 30rpx;
	}

	.coupon-item {
		display: flex;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.coupon-left {
		width: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.coupon-value {
		font-size: 36rpx;
		color: #ff4444;
		font-weight: bold;
	}

	.coupon-right {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.coupon-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.coupon-date {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 10rpx;
	}

	.coupon-desc {
		font-size: 24rpx;
		color: #999;
		line-height: 1.4;
	}

	.coupon-modal-footer {
		padding: 30rpx;
		border-top: 1rpx solid #eee;
	}

	.password-modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 99999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.password-modal-popup {
		width: 600rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		animation: slideUp 0.3s ease-out;
	}

	.password-modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.password-modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.password-modal-content {
		padding: 40rpx 30rpx;
		text-align: center;
	}

	.payment-amount {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 30rpx;
	}

	.password-input-container {
		margin-bottom: 30rpx;
	}

	.password-input {
		width: 100%;
		height: 80rpx;
		border: 2rpx solid #ddd;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 32rpx;
		text-align: center;
		letter-spacing: 10rpx;
	}

	.password-dots {
		display: flex;
		justify-content: center;
		gap: 20rpx;
		margin-bottom: 30rpx;
	}

	.password-dot {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		border: 2rpx solid #ddd;
		background-color: transparent;
	}

	.password-dot.filled {
		background-color: #333;
		border-color: #333;
	}

	.password-modal-footer {
		display: flex;
		border-top: 1rpx solid #eee;
	}

	.password-modal-footer .cancel-btn {
		flex: 1;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f5f5f5;
	}

	.cancel-text {
		font-size: 32rpx;
		color: #666;
	}

	.password-modal-footer .confirm-btn {
		flex: 1;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ff2a3a;
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
			opacity: 0;
		}

		to {
			transform: translateY(0);
			opacity: 1;
		}
	}
</style>